<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <script  th:src="@{/airent/js/vue.js}" type="text/javascript"></script>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/airent/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/airent/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<!--引入头部文件-->
<div th:replace="~{head/topBar::topBar}"></div>

<div class="container-fluid">
    <div class="row" id="user">
        <!--引入左侧栏-->
        <div th:replace="~{side/sideBar::sideBar}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <!--<h2><A shiro:hasRole="admin" th:href="@{/department/showAllDepartment}">添加</A> </h2>-->
            <div class="table-responsive">
                    <input type="text" v-model="userName">
                    <input type="button" value="查询" @click="search">
                <table class="table table-striped table-sm" style="text-align: center" id="myUser">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>性别</th>
                        <th>电话</th>
                        <th>身份证号</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="u in user">
                        <td><input type="checkbox" value="u.userId"></td>
                        <td>{{u.userName}}</td>
                        <td>{{u.realName}}</td>
                        <td>{{u.userGender}}</td>
                        <td>{{u.userTel}}</td>
                        <td>{{u.idNumber}}</td>
                        <td v-if="u.userType === 1">使用中</td>
                        <td v-else>已封禁</td>
                        <td>
                            <a href="javascript:void(0)" @click="ban(u.userId)">封禁</a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="javascript:void(0)" @click="unseal(u.userId)">解封</a>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="8">
                            当前{{pageNum}}/{{pages}}页 总计 :{{total}}条

                            <a href="javascript:void(0)" @click="jump(1)">首页</a>

                            <a v-if="pageNum > 1" href="javascript:void(0)" @click="jump(prePage)">上一页</a>
                            <a v-else href="javascript:void(0)" >上一页</a>

                            <a v-if="pageNum < pages" href="javascript:void(0)" @click="jump(nextPage)">下一页</a>
                            <a v-else href="javascript:void(0)">下一页</a>

                            <a href="javascript:void(0)" @click="jump(pages)">尾页</a>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </main>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" th:src="@{/airent/plugins/jquery/jquery.min.js}" ></script>
<script type="text/javascript" th:src="@{/airent/js/popper.min.js}" ></script>
<script type="text/javascript" th:src="@{/airent/js/bootstrap.min.js}" ></script>

<!-- Icons -->
<script type="text/javascript" th:src="@{/airent/js/feather.min.js}" ></script>
<script>
    feather.replace()
</script>

<!-- Graphs -->
<script type="text/javascript" th:src="@{/airent/js/Chart.min.js}" ></script>
<script th:inline="javascript">
    let vueApp = new Vue({
        el:"#user",
        data:{
            userName:"",
            user:[],
            pageNum:1,
            pages:0,
            total:0,
            prePage:0,
            nextPage:0,
        },
        methods:{
            search:function (){
                let url = "/userDto/list";
                let param = "&userName=" + vueApp.userName;
                $.post(url,param,function (result){
                    vueApp.user = result.list;
                    vueApp.pageNum = result.pageNum;
                    vueApp.pages = result.pages;
                    vueApp.total = result.total;
                    vueApp.prePage = result.prePage;
                    vueApp.nextPage = result.nextPage;
                },"Json")
            },
            ban:function (ele){
                let url = "/userDto/ban";
                let param = "userId=" + ele;
                $.post(url,param,function (result){
                    if (result == "0"){
                        alert("该用户已被封禁!");
                    }else {
                        alert("封禁成功！");
                        location.href = "/userManage";
                    }
                },"Json")
            },
            unseal:function (ele){
                let url = "/userDto/unseal";
                let param = "userId=" + ele;
                $.post(url,param,function (result){
                    if (result == "1"){
                        alert("该用户未被封禁!");
                    }else {
                        alert("解封禁成功！");
                        location.href = "/userManage";
                    }
                },"Json")
            },
            jump:function (ele){
                let url = "/userDto/list";
                let param = "&userName=" + vueApp.userName + "&now=" + ele;
                $.post(url,param,function (result){
                    vueApp.user = result.list;
                    vueApp.pageNum = result.pageNum;
                    vueApp.pages = result.pages;
                    vueApp.total = result.total;
                    vueApp.prePage = result.prePage;
                    vueApp.nextPage = result.nextPage;
                },"Json")
            }
        },
        created:function (){
            let url = "/userDto/list";
            $.post(url,null,function (result){
                vueApp.user = result.list;
                vueApp.pageNum = result.pageNum;
                vueApp.pages = result.pages;
                vueApp.total = result.total;
                vueApp.prePage = result.prePage;
                vueApp.nextPage = result.nextPage;
            },"Json")
        },
    })

</script>

</body>

</html>
